<!--
 * @Description: 
 * @Author: lzp
 * @Date: 2021-03-22 14:31:32
 * @LastEditTime: 2021-03-22 15:44:52
 * @LastEditors: xxx
-->
<template>
  <div :style="'top:' + companyTop + 'px'" v-show="userList.length" class="company-component">
    <!-- 按姓氏或者组织查询 -->
    <div class="launch-company">
      <div class="company-bar">
        <div class="company-bar-name">
          <i class="jeicon jeicon-sitemap" />
          <span v-if="companyName">{{ companyName }} ({{ AllPersonList.length }})</span>
        </div>
        <div class="company-bar-change">
          <i @tap="showUser=!showUser" class="jeicon jeicon-exchange" />
          <span @tap="handlerChangeCompany">按{{ !showUser?'姓氏':'组织' }}查询</span>
        </div>
      </div>
    </div>
    <div
      id="scrollContent"
      :class="[checkedList.length ? 'bottom-chat' : '', showUser ? 'top-chat' : '']"
      class="contact-launch"
    >
      <!-- 组织查询的时候，点击组织列表出现的title -->
      <ul v-show="!showUser && groupList.length > 1" class="company-check-list">
        <li
          v-for="(item,index) of groupList"
          :key="'check'+index"
          @tap="handlChild(item,'del',index)"
          :class="[index == groupList.length - 2 ? 'font-Size': '']"
        >{{ item.text }}</li>
      </ul>
      <!-- 公司 -->
      <imTreeUser
        id="company-list"
        v-if="showChecked && !showUser"
        @selection="tapArea"
        :cfgcopy="cfg"
      />
      <ul id="company-list" v-if="!showChecked && !showUser" class="company-list">
        <li
          v-for="(item,index) of companyList"
          :key="index"
          @tap.stop="tapArea({'boolean':!showChecked,'obj':item,'index':index})"
          class="mui-table-view-cell list-item-employee"
        >
          <template>
            <!-- <svg
              v-if="showChecked"
              style="margin-right: 10px;"
              class="jeicon"
              aria-hidden="true"
            >
              <use
                v-if="item.checked"
                xlink:href="#jeicon-dot-circle-o"
              />
              <use
                v-else
                xlink:href="#jeicon-circle-o"
              />
            </svg>-->
            <span v-if="buttonText == 'add' || buttonText == 'delete'">
              <i
                :class="[itemChild.checked?'jeicon-check-circle':'jeicon-circle-thin-o']"
                class="jeicon"
              />
            </span>
            <span v-if="item.type==1" v-html="setPhoto(item.id)" />
            <span
              style="color:rgba(63,63,63,1);"
            >{{ item.name }} {{ item.num ? '(' + item.num+')': '' }}</span>
            <span
              @tap.stop="handlChild(item,'add')"
              v-if="!showChecked && (item.type == 0)"
              class="je-right"
            >
              <i class="jeicon jeicon-angle-right" />
            </span>
          </template>
        </li>
      </ul>
      <!-- 姓名 -->
      <ul
        ref="listView"
        v-show="showUser"
        :class="scrollIos?'launch-userScroll':''"
        class="launch-user"
      >
        <template v-for="(item,index) of userList">
          <li
            ref="listGroup"
            :id="item.char+'-scroll'"
            :key="'user'+index"
            v-if="item.list.length"
            class="user-char"
          >{{ item.char }}</li>
          <li
            v-for="(itemChild,childIndex) of item.list"
            :key="'user-child'+itemChild.id"
            @tap="handleCheckUser(itemChild,childIndex,index)"
            class="user-item"
          >
            <div v-lazy-container="{ selector: 'img' }" class="user-item-name">
              <!-- <svg
                v-if="showChecked"
                style="margin-right: 10px;"
                class="jeicon"
                aria-hidden="true"
              >
                <use
                  v-if="itemChild.checked"
                  xlink:href="#jeicon-dot-circle-o"
                />
                <use
                  v-else
                  xlink:href="#jeicon-circle-o"
                />
              </svg>-->
              <span v-if="showChecked" style="margin-right: 10px;">
                <i
                  :class="[itemChild.checked?'jeicon-check-circle':'jeicon-circle-thin-o']"
                  class="jeicon"
                />
              </span>
              <span v-html="itemChild.photo" />
              <div style="width: 100%;">
                <span>{{ itemChild.username }}</span>
                <span
                  v-if="itemChild.deptname"
                  style="float: right;color:#A9ABA9;font-size:14px;"
                >{{ itemChild.deptname }}</span>
              </div>
            </div>
          </li>
        </template>
      </ul>
      <!-- 26个字母 -->
      <ul id="ulChar" v-show="showUser" class="launch-chart">
        <li
          v-for="(item, index) of rightChar"
          :key="item"
          :data-index="index"
          @tap="handlerChar(item)"
          class="chart-item"
        >
          <div :class="[item==selChar?'sel-chart-item':'']">
            <a>{{ item }}</a>
          </div>
          <!-- 滑动到指定的字母显示的样式 -->
          <div
            v-if="rightChar.includes(item) && item==selChar"
            :class="rightChar.includes(item) && item==selChar?'chart-itemChange':''"
          >{{ item }}</div>
        </li>
      </ul>
    </div>

    <div v-show="checkedList.length||selectData.length" class="check-person">
      <div class="check-person-list">
        <div class="task_type mui-scroll-wrapper">
          <div class="mui-scroll">
            <div
              v-html="item.photo"
              :key="item.userId"
              v-for="item in checkedList"
              class="check-scrollEvery"
            />
          </div>
        </div>
      </div>
      <div class="check-outline" />
      <div @tap="goChat" class="check-confirm">
        <span>发起会话({{ checkedList.length }})</span>
      </div>
    </div>
  </div>
</template>
<script>
import Organ from '../../class/Organ'
import Dialog from '../../class/Dialog'
import Group from '../../class/Group'
import imTreeUser from '../../../../components/imTreeUser'
import { openWindow } from '../../../../helper'
export default {
  name: 'Company',
  components: {
    imTreeUser,
  },
  props: {
    companyTop: {
      type: Number,
      default: () => 0,
      required: true,
    },
    showChecked: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      AllPersonList: [], // 租户下的所有人
      showUser: true, // true为组织;  false为姓氏列表显示
      selChar: '', // 按姓氏排列的时候，右侧的bar默认显示是A
      companyList: [],
      companyListCheck: [],
      userList: [],
      checkedList: [], // 选中checked
      showGrounp: false,
      groupList: [{ text: '公司' }], // 组织搜索的时候，点击列表显示的索引
      orgList: [],
      checkGroup: [],
      childrenList: [],
      resourceType: '', // 来源为了处理建群的时候如果有一个那就要有文案提示
      list: [],
      rightChar: [], // 右侧实际存在的字符数组
      indexChar: null, // 默认右边的滑动状态
      selectData: '',
      scrollIos: false, // ios字母控制滚动条是否显示
      cfg: {
        configInfo: 'JE_CORE_DEPTUSER,xx,xxx,M_', // m加下划线是异步，不加下划线是同步
        type: 'user',
        whereSql: "AND STATUS='1' AND VALID='1'",
        value: '',
        pkName: 'id',
      },
    }
  },
  computed: {
    companyName() {
      return JE.getCurrentUser().jtgsMc
    },
    getZhid() {
      return JE.getCurrentUser().zhId
    },
    userId() {
      return JE.getCurrentUser().id
    },
    charList() {
      return [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
      ]
    },
  },
  watch: {
    showUser(nv) {
      // 当切换按组织和按部门时，页面要值要重新赋值，并且要滚动到滑动区域顶部位置
      this.checkedList = []
      this.checkGroup = []
      if (nv) {
        const { char } = this.userList[0]
        setTimeout(() => {
          document.querySelector(`#${char}-scroll`).scrollIntoView(true)
        }, 0)
      } else {
        this.companyList = this.orgList
        setTimeout(() => {
          document.getElementById('company-list').scrollTo(0, 0)
        }, 0)
      }
    },
    checkedList() {
      // 此处还要处理selectedData
      if (this.checkedList.length) {
        // 每次变化都要传给父级
        this.$emit('receivData', this.checkedList)
      }
    },
  },
  created() {},
  async mounted() {
    window.addEventListener('creatGroupBack', (target) => {
      this.selectData = target.detail.selection
      this.filerSelectData(this.selectData)
      // 执行默认选中
    })
    mui('.mui-scroll-wrapper.task_type').scroll({
      scrollX: true,
      scrollY: false,
      indicators: false,
    })
    mui.init({
      gestureConfig: {
        tap: true, // 默认为true-----单击事件
        doubletap: true, // 默认为false-----双击事件
        longtap: true, // 默认为false-------长按事件
        swipe: true, // 默认为true------滑动事件
        drag: true, //  默认为true------拖动事件
        hold: true, // 默认为false，不监听-------按住屏幕事件
        release: false, // 默认为false，不监听-------------离开屏幕事件
      },
    })
    this.AllPersonList = await Organ.fetchGetAllPeoples(this.getZhid)
    // 获取所有的人员
    this.getPeople()
    // 人员右侧字母的滑动
    this.holdChar()
    // 初始化组织树
    this.handleDeptChild()
  },
  methods: {
    // 执行筛选
    filerSelectData(data) {
      const filerArray = []
      this.userList.forEach((userListItem, index) => {
        userListItem.list.forEach((item, childIndex) => {
          item.childIndex = childIndex
          item.index = index
          filerArray.push(item)
        })
      })
      filerArray.map((item) => {
        data.map((item2) => {
          if (item2.id == item.userid) {
            this.handleCheckUser(item, item.childIndex, item.index)
          }
        })
      })
    },
    // 获取所有人员，按姓氏排列的所有人员
    getPeople() {
      // 变成想要的格式
      this.getCompanyByName()
    },
    // 点击面积更改
    tapArea(obj) {
      const that = this
      if (obj.boolean) {
        that.handlChild(obj.obj, 'add')
      } else {
        that.handleCheck(obj.obj) //
      }
    },
    // 滑动右侧首字母
    holdChar() {
      mui('#ulChar').on('drag', '.chart-item', (e) => {
        this.scrollIos = true
        // 获取href
        const conHeight = document.getElementById('scrollContent').clientHeight
        // 获取字母的外边距
        // const ulCharMargin = document.getElementById('ulChar');
        // const computedStyle = getComputedStyle(ulCharMargin, null);
        // const marginHeight = parseInt(computedStyle.marginTop);

        const hh = e.detail.center.y
        // 如果是通讯录进入的就得出去请求头和其他的高度总和true 是从
        const changeHref = this.showChecked ? 150 : 200
        const indexChar = Math.ceil((hh - conHeight * 0.2 - changeHref) / 30)
        if (indexChar >= 0 && indexChar <= 25) {
          const char = this.rightChar[indexChar]
          this.indexChar = indexChar
          this.selChar = char
          const isHas = this.userList.filter((item) => item.char === char)
          if (isHas[0]) {
            document.querySelector(`#${char}-scroll`).scrollIntoView(true)
          }
        }
      })
      mui('#ulChar').on('dragend', '.chart-item', (e) => {
        this.scrollIos = false
      })
    },
    setPhoto(id) {
      return JE.getUserPhoto(id, true)
    },
    // 点击完成之后跳转聊天页面
    async goChat() {
      if (this.checkedList.length === 1) {
        if (this.checkedList[0].id === JE.getCurrentUser().id) {
          JE.msg('自己和自己不能聊天哦')
          return false
        }
        JE.msg('群聊中至少要添加除自己2人哦')
        return false
      }
      if (this.checkedList.length > 1) {
        JE.showWaiting('加载中...')
        if (this.checkedList.length === 2) {
          const isHas = this.checkedList.find(
            (item) => item.id === JE.getCurrentUser().id
          )
          if (isHas && Object.keys(isHas).length) {
            JE.msg('群聊中至少要添加除自己2人哦~')
            JE.closeWaiting()
            return false
          }
        }
        const groupInfo = await this.createGroup()
        // groupInfo.groupUserNum = groupInfo.name.split('、').length;  因为新需求每次返回的都是5个人名所以不能切割了
        if (groupInfo.id) {
          const resObj = await Dialog.createGroupChat(
            groupInfo.id,
            JE.getCurrentUser().id,
            groupInfo
          )
          resObj.sourceType = 'createGroup'
          resObj.groupUserNum = groupInfo.groupUserNum
          resObj.fullName = groupInfo.name // 传递一个变量保存完成的讨论组名称
          JE.closeWaiting()
          const targetWebview = plus.webview.getWebviewById('JE-PLUGIN-IM')
          mui.fire(targetWebview, 'createdGroup', resObj)
        }
      }
    },
    // 创建群组
    async createGroup() {
      // 组织查询与姓氏查询数据现在统一
      const userIdList = this.checkedList.map((user) => user.id)
      const userNameList = this.checkedList.map(
        (user) => user.text || user.username
      )
      const isHasOwer = this.checkedList.filter(
        (item) => item.id === JE.getCurrentUser().id
      )
      if (!isHasOwer.length) {
        userNameList.unshift(JE.getCurrentUser().username)
        userIdList.unshift(JE.getCurrentUser().id)
      }
      // eslint-disable-next-line no-return-await
      return await Group.createGroup(
        userNameList.join('、'),
        userIdList.join(','),
        JE.getCurrentUser().id,
        JE.getCurrentUser().username
      )
    },
    // 按组织选中
    handleCheck(item) {
      if (item.num === 0 && item.type != 1) {
        JE.msg('该部门下暂无人员哈~')
        return false
      }
      if (!this.showChecked) {
        if (!item.length) {
          JE.fire('JE-PLUGIN-IM', 'org-chatTX', {
            webviewId: plus.webview.currentWebview().id,
            userId: item.userid || item.id,
          })
          return false
        }
      }
      this.checkedList = []
      if (JE.isEmpty(this.checkedList)) {
        this.checkGroup = item
        this.checkedList = item
      } else {
        this.checkGroup.map((checkGroupItem) => {
          const itemIndex = item.findIndex(
            (itemItem) => itemItem.id === checkGroupItem.id
          )
          if (itemIndex >= 0) {
            this.checkGroup.splice(itemIndex, 1)
          } else {
            this.checkGroup.push(item)
          }
        })
      }
    },
    // 按姓氏选中
    handleCheckUser(item, childIndex, index) {
      if (this.showChecked) {
        this.$set(
          this.userList[index].list[childIndex],
          'checked',
          !item.checked
        )
        if (item.checked) {
          this.checkedList.push(item)
        } else {
          // 如果变为false ,则要删除表中已有的
          this.checkedList.splice(
            this.checkedList.findIndex((items) => items.id === item.id),
            1
          )
        }
      } else {
        openWindow({
          url: 'pages_userinfo_index.html',
          id: 'userinfo',
          title: '个人信息',
          extras: {
            userId: item.id,
          },
        })
      }
    },
    // 字符串快速筛选
    handlerChar(char) {
      this.selChar = char
      const isHas = this.userList.filter((item) => item.char === char)
      if (isHas[0]) {
        document.querySelector(`#${char}-scroll`).scrollIntoView(true)
      }
    },
    // 公司切换查询
    handlerChangeCompany() {
      // 当this.showUser = false，列表显示的是组织，但是要显示按姓氏查询
      this.showUser = !this.showUser
      // 切换列表清除当前数据
      this.userList.map((item, index) => {
        item.list.map((itemChild, childIndex) => {
          this.$set(this.userList[index].list[childIndex], 'checked', false)
        })
      })
      this.groupList = [{ text: '公司' }]
      this.checkedList = []
      this.selectData = []
      this.$set(this.cfg, 'value', '')
      this.$emit('receivData', [])
    },
    // 初始化组织树 获取后台返回数据
    async handleDeptChild() {
      this.orgList = await Organ.getChildByDeptId(
        this.userId,
        JE.getCurrentUser().gsbmId
      )
      this.companyList = this.orgList
      // const organList = await Organ.getUserInfoByUserId(this.userId);
      // this.companyName = organList[0].name.length > 10 ? `${organList[0].name.substr(0, 10)}...` : organList[0].name;
      // this.companyList = organList[0].children;
      // this.orgList = organList[0].children;
    },
    // 点击部门列表获取子部门的列表
    async handlChild(item, type, index) {
      if (type === 'add') {
        // 如果这个节点不是父节点，那么直接跳转到个人信息页面 TODO
        // const newItem = item.children ? item.children : item;
        if (item.type == '1') {
          JE.fire('JE-PLUGIN-IM', 'org-chatTX', {
            webviewId: plus.webview.currentWebview().id,
            userId: item.userid || item.id,
          })
          return false
        }
        this.companyList = []
        const newItem = await Organ.getChildByDeptId(this.userId, item.id)
        this.groupList.push({ text: item.text, children: newItem })
        if (!newItem.length) {
          JE.msg('该部门下暂无人员哈~')
          return false
        }
        this.companyList = newItem || []
        setTimeout(() => {
          document.querySelector('#company-list').scrollTop = 0
        }, 100)
      } else if (type === 'del') {
        if (this.groupList.length === index + 1) {
          return false
        }
        console.log('0000', item)
        // this.groupList.splice(index + 1, this.groupList.length);
        if (item.text === '公司') {
          this.companyList = this.orgList
        } else {
          this.companyList = item.children
        }
        this.groupList.splice(index + 1, this.groupList.length)
        setTimeout(() => {
          document.querySelector('#company-list').scrollTop = 0
        }, 100)
      }
    },
    // 根据姓名查询
    getCompanyByName() {
      // 将姓氏中右侧的bar与人员的首拼做关联，this.userList
      this.charList.map((item) => {
        const childrenList = []
        const itemObj = {}
        this.AllPersonList.map((items) => {
          if (item === items.char) {
            childrenList.push(items)
          }
          itemObj.char = item
          itemObj.list = childrenList
        })
        if (itemObj.list.length) {
          this.userList.push(itemObj)
          this.rightChar.push(itemObj.char)
        }
      })
      JE.closeWaiting()
    },
    // 确定
    async handleConfirm() {
      this.$emit('checklist', this.checkedList)
    },
  },
}
</script>
<style>
img {
  width: 70px !important;
  height: 70px !important;
  border-radius: 50%;
}
.je-user-photo {
  width: 70px !important;
  height: 70px !important;
  text-align: center;
  background: rgba(252, 179, 63, 1);
  border-radius: 50%;
  text-align: center;
  line-height: 75px;
  font-size: 26px;
  color: #fff;
  margin-right: 10px;
}
#company-list .allModal .main-content {
  top: 0 !important;
}
</style>

<style lang="less" scoped >
.company-component {
  width: 100%;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  .mui-table-view-cell {
    border-bottom: 1px solid #f5f5f5;
    .je-right {
      position: absolute;
      right: -20px;
      width: 80px;
      height: 100%;
      text-align: center;
      i {
        font-size: 24px;
        color: #a9aba9;
        line-height: 100px;
      }
    }
    padding: 0;
  }
  .mui-table-view-cell::after {
    left: 0;
    height: 0;
    width: 100%;
  }
  .mui-table-view-cell:last-child:before {
    height: 1px;
  }
  .contact-launch {
    position: absolute;
    top: 100px;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    background: #fff;
    overflow: hidden;
  }
  .bottom-chat {
    bottom: 100px !important;
  }
  .top-chat {
    top: 100px !important;
  }

  .launch-search {
    height: 60px;
    background: #ffffff;
    border-radius: 30px;
    margin: 20px 0px;
    display: flex;
    align-items: center;
    .jeicon {
      font-size: 32px;
      color: #bebebe;
    }
    .jeicon-search {
      margin-left: 20px;
    }
    .jeicon-funnel {
      margin-right: 20px;
    }
    input {
      font-size: 32px;
      padding-left: 20px;
      width: 90%;
      margin: 0;
      border: 0;
    }
    input::-webkit-input-placeholder {
      color: #bebebe;
    }
  }
  .common {
    height: 100px;
    display: flex;
    align-items: center;
    // border-bottom: 1px solid #f5f5f5;
    img {
      width: 70px;
      height: 70px;
      border-radius: 70px;
    }
    span {
      // padding-left: 10px;
      font-size: 32px;
      color: #3f3f3f;
    }
    svg {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
  }
  .launch-company {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: #ffffff;
    padding: 0 20px;
    overflow: hidden;
    .company-bar {
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      .company-bar-name {
        display: flex;
        align-items: center;
        i {
          font-size: 28px;
          color: #536dfe;
        }
        span {
          margin-left: 4px;
          font-size: 28px;
          color: #a9aba9;
        }
      }
      .company-bar-change {
        display: flex;
        align-items: center;
        min-width: 100px;
        margin-left: 20px;
        margin-right: 30px;
        i {
          font-size: 26px;
          color: #536dfe;
        }
        span {
          margin-left: 8px;
          font-size: 28px;
          color: #3f3f3f;
        }
      }
    }
  }
  .mui-navigate-right:after,
  .mui-push-right:after {
    right: 0;
  }
  .company-list {
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 96px;
    .list-item-employee {
      .common;
      span {
        padding-left: 0;
      }
    }
    .list-item-dept {
      .common;
      justify-content: space-between;
      a {
        font-size: 32px;
        color: #3f3f3f;
      }
      i {
        font-size: 30px;
        color: #a9aba9;
      }
    }
    .je-user-photo {
      margin-right: 10px;
    }
  }
  .company-check-list {
    height: 100px;
    border-bottom: 1px solid #f5f5f5;
    width: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    background: #fff;
    .font-Size {
      color: #536dfe;
    }
    li {
      padding-right: 12px;
      height: 100px;
      line-height: 100px;
      font-size: 28px;
      color: #3f3f3f;
      margin-right: 12px;
      display: inline-block;
      position: relative;
      &:first-child {
        color: #536dfe;
      }
      &:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        height: 18px;
        width: 18px;
        border-width: 1.2px 1.2px 0 0;
        border-color: #bebebe;
        border-style: solid;
        transform: rotate(45deg);
      }
      &:last-child {
        padding-right: 100px;
      }
    }
    &.after {
      height: 0 !important;
    }
  }
  .launch-userScroll {
    overflow-y: hidden !important;
  }
  .launch-user {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    // padding: 0 20px;
    overflow-x: hidden;
    box-sizing: content-box;
    .user-char {
      background-color: #f2f2f2;
      height: 24px;
      line-height: 24px;
      font-size: 24px;
      padding-left: 20px;
      color: #bebebe;
    }
    .user-item {
      // padding-right: 24px;
      justify-content: space-between;
      width: 93%;
      .common;
      .user-item-name {
        display: flex;
        // padding-left: 20px;
        align-items: center;
        flex: 1;
        .jeicon {
          color: #a9aba9;
        }
        .jeicon-check-circle {
          color: #ff6f45;
        }
      }
      .user-item-lastname {
        width: 70px;
        height: 70px;
        color: #fff;
        word-wrap: break-word;
        text-align: center;
        line-height: 70px;
        font-size: 12px;
        border-radius: 50%;
        background: #536dfe;
        padding-left: 0;
      }
      .user-item-dept {
        font-size: 28px;
        color: #a9aba9;
        margin-right: 30px;
      }
      .user-item-added {
        color: #a9aba9;
        font-size: 28px;
        margin-right: 30px;
      }
      .user-item-add {
        margin-right: 30px;
        width: 84px;
        height: 40px;
        display: flex;
        align-items: center;
        border-radius: 4px;
        border: 1px solid #536dfe;
        span {
          font-size: 24px;
          color: #536dfe;
        }
      }
    }
  }
  .launch-chart {
    position: fixed;
    z-index: 22;
    height: 60%;
    margin: auto;
    top: 270px;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 75px;
    .chart-item {
      // margin-bottom: 10px;
      width: 150px;
      height: 30px;
      text-align: right;
      line-height: 30px;
      padding-right: 20px;
      position: relative;
      a {
        font-size: 25px;
        color: #bebebe;
      }
      // 动画效果
      @keyframes fadeOut {
        0% {
          opacity: 1; /*初始状态 透明度为0*/
        }
        25% {
          opacity: 0.75; /*中间状态 透明度为0*/
        }
        50% {
          opacity: 0.5; /*中间状态 透明度为0*/
        }
        75% {
          opacity: 0.25; /*中间状态 透明度为0*/
        }
        100% {
          opacity: 0; /*结尾状态 透明度为1*/
        }
      }
      .chart-itemChange {
        opacity: 0;
        width: 100px;
        height: 100px;
        border-radius: 5px;
        font-size: 75px;
        color: rgb(85, 85, 85);
        text-align: center;
        line-height: 100px;
        background: rgba(185, 185, 185, 0.5);
        position: fixed;
        left: 50%;
        top: 50%;
        margin: -50px 0 0 -50px;
        z-index: 99;
        animation-name: fadeOut;
        animation-duration: 1s;
      }
    }
    .sel-chart-item {
      list-style: none;
      position: absolute;
      right: 6px;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background: #536dfe;
      color: #ffffff;
      border-radius: 24px;
      a {
        font-size: 20px;
        color: #ffffff;
      }
    }
  }
  .check-person {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    display: flex;
    overflow: hidden;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    .check-person-list {
      width: 70%;
      height: 100px;
      .task_type {
        width: 75%;
        overflow-x: scroll;
        overflow-y: hidden;
        .mui-scroll {
          width: auto;
          height: 100px;
          display: flex;
          align-content: center;
          justify-content: flex-start;
          align-items: center;
          overflow-x: scroll;
        }
      }
      .check-scrollEvery {
        display: inline-block;
        width: 76px;
        height: 76px;
        margin-left: 8px;
      }
      img {
        width: 70px !important;
        height: 70px !important;
        border-radius: 50%;
      }
      span,
      .je-user-photo {
        display: inline-block;
        width: 70px !important;
        height: 70px !important;
        text-align: center;
        background: rgba(252, 179, 63, 1);
        border-radius: 50%;
        line-height: 70px;
        font-size: 24px;
        margin-left: 16px;
        color: #fff;
        img {
          width: 70px !important;
          height: 70px !important;
          border-radius: 50%;
          display: block;
        }
      }
      .delete-button {
        position: absolute;
        top: -50%;
        right: 0px;
        color: red;
        display: none;
        font-style: normal;
      }
      .delete-button-show {
        display: block;
      }
    }
    .check-outline {
      width: 1px;
      height: 80px;
      background: #d8d8d8;
      position: absolute;
      top: 50%;
      right: 25%;
      transform: translateY(-50%);
      z-index: 10;
    }
    .check-confirm {
      span {
        width: 170px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        background: #ff6f45;
        font-size: 28px;
        color: #fff;
        display: block;
        border-radius: 15px;
      }
    }
  }
}
</style>